import {Col, Row,Spin} from "antd"
import {NavLink} from "react-router-dom";
import {GetArticleList} from '../../../service/article'
import './content.scss'
import {useEffect, useRef, useState} from "react";
import './recommend.scss'
import TimeFilter from '../../../util/TimeFilter'
export default function Recommended() {
    /**
     * 获取文章参数接口
     */
    interface Article {
        page: number,
        size: number,
        type: number
    }
    let [AarticleInfo, setAarticleInfo] = useState<Article>({
        page: 1,
        size: 10,
        type: 1
    })
    let [ArticleList, setList] = useState<any>([])
    let [ArticleCount, setCount] = useState<Number>()
    let Count = useRef(ArticleCount)
    Count.current = ArticleCount
    let AarticleInfoCopy = useRef(AarticleInfo);
    AarticleInfoCopy.current = AarticleInfo
    let ArticleListCopy = useRef(ArticleList);
    ArticleListCopy.current = ArticleList
    /**
     * 懒加载
     */
    let canRun:boolean =true
    function layzList() {
        let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度
        if (scrollHeight - scrollTop === clientHeight && Count.current) {
           if(!canRun){
               return
           }
           canRun=false
            setTimeout(()=>{
                let NewInfo = AarticleInfo
                NewInfo.page += 1
                setAarticleInfo(NewInfo)
                getArticleList()
                canRun=true
            },300)

        }
    }
    /**
     * 调用接口
     */
    function getArticleList() {
        GetArticleList(AarticleInfo).then(res => {
            setCount(res.data.count)
            Count.current = res.data.count
            setList((ArticleList: any)=>[...ArticleList,...res.data.data])
        })
    }

    useEffect(() => {
        getArticleList()
        window.addEventListener('scroll', layzList)
    }, [AarticleInfo])
    return (
        <div style={{marginTop: "20px"}}>
            <Row>
                <Col offset={6} span={9} className="content">
                    <div>
                        <div style={{display: "flex", padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.2)"}}>
                            <div className="content_item activeContent_item">推荐</div>
                            <div className="content_item">最新</div>
                            <div className="content_item">热榜</div>
                        </div>
                    </div>
                    {ArticleList.length>0?null:<div className="example"><Spin /></div>}
                    {/*    列表*/}
                    <div>
                        {/*每个*/}
                        {
                            ArticleList.map((item: any) => {
                                return (
                                    <div key={item.article_id}
                                         style={{padding: "10px", borderBottom: "1px solid rgba(0,0,0,0.2)"}}>
                                        <div style={{display: "flex", justifyContent: "space-between"}}>
                                            {/*左边*/}
                                            <div style={{width: "400px"}}>
                                                <div style={{display: "flex", alignItems: "center"}}>
                                                    <span className="text">{item.nick_name}</span>
                                                    <span className="dividing"/>
                                                    <span
                                                        className="text">{TimeFilter(new Date(item.created_at * 1000))}</span>
                                                    <span className="dividing"/>
                                                    <div className="text">
                                                        {item.tags.map((item: any) => {
                                                            return <span className="tag"
                                                                         key={item.tag_name}>{item.tag_name}</span>
                                                        })}
                                                    </div>
                                                </div>
                                                <div className="title">{item.title}</div>
                                                <div className="describe">{item.describe}</div>
                                                <ul className="iconList">
                                                    <li className="icon">
                                                        <i className="pv"/>
                                                        <span>{item.pv}</span>
                                                    </li>
                                                    <li className="icon">
                                                        <i className="dian"/>
                                                        <span>322</span>
                                                    </li>
                                                    <li className="icon">
                                                        <i className="ping"/>
                                                        <span>{item.comment_num}</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            {/*    右边图片*/}
                                            <div style={{display: "flex", alignItems: "center"}}>
                                                <img style={{width: "125px", height: "80px"}}
                                                     src={item.pic ? item.pic : 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aad3b1e75dc54cd9a7454326e5d7dc61~tplv-k3u1fbpfcp-no-mark:720:720:720:480.awebp?'}
                                                     alt=""/>
                                            </div>
                                        </div>

                                    </div>
                                )
                            })
                        }
                    </div>
                </Col>

            </Row>

        </div>
    )
}
